<template>
  <svg aria-hidden="true" class="svg-icon" :style="getStyle">
    <use :xlink:href="symbolId" :fill="color" />
  </svg>
</template>

<script lang="ts" setup>
import type { CSSProperties } from 'vue';
import { computed } from 'vue';

interface Props {
  prefix?: string;
  name: string; // 图标名
  size?: number | string; // 图标大小，默认1em
  color?: string; // 图标颜色
}

const props = withDefaults(defineProps<Props>(), {
  prefix: 'icon',
});

const symbolId = computed(() => `#${props.prefix}-${props.name}`);
const getStyle = computed((): CSSProperties => {
  const { size } = props;
  let s = `${size}`;
  s = `${s.replace('px', '')}px`;
  return {
    width: size ? s : '1em',
    height: size ? s : '1em',
  };
});
</script>
<style>
.svg-icon {
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>
